<template>
	<view>
		<view class="catalog-box">
			<view class="layout">
				<view class="catalog-box-menu">
					<view class="catalog-box-menu-item" v-for="(catalog,index) in catalogList" :key="index">
						<view :class="filterForm.catalogID == catalog.ID?'catalog-box-menu-actived':''" @click="handleCatalogSelected(catalog)">
							{{catalog.catalogName}}
						</view>
					</view>
				</view>
				<view class="catalog-box-prod">
					<view class="catalog-box-prod-tooltip">
						<view>人气TOP</view>
						<view>必喝爆款，无限回购</view>
					</view>
					<view class="catalog-box-prod-list">
						<view class="catalog-box-prod-list-item" v-for="(product,index) in procutList" :key="index">
							<view class="layout" >								
								<view class="catalog-box-prod-list-item-icon" @click="handleProductDetail(product)">
									<image :src="product.productLogo"></image>
								</view>
								<view class="catalog-box-prod-list-item-text" @click="handleProductDetail(product)">
									<view class="catalog-box-prod-list-item-text-note">
										<view class="catalog-box-prod-list-item-text-note-bold">
											{{product.productName}}
										</view>
										<view class="catalog-box-prod-list-item-text-note-todo">
											0乳糖|超凉感，嘴巴里开空调
										</view>
									</view>
									<view class="catalog-box-prod-list-item-text-volume">
										<view class="layout">
											<view class="catalog-box-prod-list-item-text-volume-price">
												<view class="catalog-box-prod-list-item-text-volume-price-newest">￥{{product.productPrice}}预估到手</view>
												<view class="catalog-box-prod-list-item-text-volume-price-original">￥{{product.originalPrice}}面价￥29</view>
											</view>
											<view @click="handleShoppingSubmitButton(product)" class="catalog-box-prod-list-item-text-volume-button">+</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterForm:{
					catalogID:0
				},
				catalogList:[
				],
				procutList:[
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.refreshCatalogList();
			this.refreshProductList();
		},
		methods: {
			handleCatalogSelected:function(catalogue){
				console.log(this.filterForm)
				this.filterForm.catalogID = catalogue.ID;
				this.refreshProductList();
			},
			handleProductDetail:function(product){
				uni.navigateTo({
					url:"/pages/product/dossier/dossier?productID="+product.ID
				})
			},
			handleShoppingSubmitButton:function(product){
				let _formData = {
					"prodcutName":product.productName
				}
				this.$transaction.joinShopping(_formData).then(res=>{
					console.log(res)
				})
			},
			refreshProductList:function(){
				let _this = this;
				let formData = {
					"catalogID":_this.filterForm.catalogID
				}
				_this.$supply.getProductList(formData).then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.procutList = res.data.list;
					}
				})
			},
			refreshCatalogList:function(){
				let _this = this;
				_this.$supply.getCatalogList().then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.catalogList = res.data.list;
					}
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; }
.catalog-box {  }
.catalog-box-menu { position: fixed; top: 100rpx; left: 0; bottom: 0; width: 200rpx; }
.catalog-box-menu-item { padding: 25rpx 15rpx; font-size: 14px; text-align: center; }
.catalog-box-menu-actived { font-weight: bold; }

.catalog-box-prod { position: fixed; top: 20rpx; right: 15rpx; left: 220rpx; bottom: 0; background: #fff; }
.catalog-box-prod { border-radius: 15rpx; padding: 15rpx; }

.catalog-box-prod-list { padding: 25rpx 0; }
.catalog-box-prod-list-item {  margin-bottom: 25rpx; }
.catalog-box-prod-list-item-icon { width: 150rpx; height: 150rpx; }
.catalog-box-prod-list-item-icon image { border-radius: 100rpx; }
.catalog-box-prod-list-item-text { width: 350rpx; padding-left: 15rpx;}
.catalog-box-prod-list-item-text-note { height: 75rpx; }
.catalog-box-prod-list-item-text-note-bold { height: 40rpx; overflow: hidden; padding-top: 15rpx; line-height: 40rpx; font-size: 16px; font-weight: 900; }
.catalog-box-prod-list-item-text-note-todo { font-size: 12px; color: #666;}
.catalog-box-prod-list-item-text-volume { height: 75rpx; line-height: 50rpx; overflow: hidden; }
.catalog-box-prod-list-item-text-volume-price { width: 280rpx; font-size: 14px;}
.catalog-box-prod-list-item-text-volume-price-newest { height: 30rpx; color: red; }
.catalog-box-prod-list-item-text-volume-price-original { font-size: 13px; height: 30rpx; color: #999; }
.catalog-box-prod-list-item-text-volume-button { width: 50rpx; height: 50rpx; border-radius: 50rpx; background: red; line-height: 50rpx;}
.catalog-box-prod-list-item-text-volume-button { margin-right: 20rpx; text-align: center; color: #fff; margin-top: 10rpx; }
</style>
